<template>
  <div id="discover">
    <!-- menu -->
    <el-menu
      :default-active="getRouteIndex"
      mode="horizontal"
      router>
      <el-menu-item index="/main/discover/recommend">个性推荐</el-menu-item>
      <el-menu-item index="/main/discover/playlists">歌单</el-menu-item>
      <!-- <el-menu-item index="/main/discover/toplist">主播电台</el-menu-item> -->
      <el-menu-item index="/main/discover/toplist">排行榜</el-menu-item>
      <el-menu-item index="/main/discover/artists">歌手</el-menu-item>
      <!-- <button @click="test">test</button> -->
    </el-menu>
    <div class="discover-container">
      <router-view
        @scrollTo="scrollTo"
        @scrollUpdate="scrollUpdate"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Discover',
  computed: {
    getRouteIndex () {
      // console.log(this.$router.path)
      return this.$route.path
    }
  },
  methods: {
    // 1. 滚动至
    scrollTo (top) {
      this.$emit('scrollTo', top)
    },
    // 2. 刷新滚动
    scrollUpdate () {
      this.$emit('scrollUpdate')
    }
  }
}
</script>

<style scoped lang="less">
#discover {
  // display: flex;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  .el-menu {
    user-select: none;
    width: calc(100% - 80px);
    height: 50px;
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0 40px;
    background-color: #fafafa;
    .el-menu-item {
      height: 49px;
      line-height: 49px;
      margin: 0 10px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.7);
      background-color: #fafafa;
      &.is-active {
        border-color: var(--base--color);
        color: var(--base--color);
      }
    }
  }
  .discover-container {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>

<style lang="less">
#discover {
  > div {
    width: 100%;
    height: 100%;
    padding: 20px 40px 0 40px;
  }
}
</style>
